<template>
	<div class="change-container">
		<!--修改支付密码内容-->
		<div class="change-account" v-if="!isChangePayPasswordSuccess">
			<div class="change-account-title">{{$t('message.changePayPassword')}}</div>
			<div class="change-account-label">
				<label for="oldPayPassword">{{$t('message.oldPayPassword')}}:</label>
			</div>
			<div class="change-account-input">
				<input type="password" id="oldPayPassword" v-model="oldPayPassword" :placeholder="$t('message.inputOldPayPassword')" />
			</div>
			<div class="change-account-error" v-if="isOldPayPasswordError">
				<div class="change-account-error-text">
					{{$t('message.oldPayPasswordError')}}
				</div>
				<div class="change-account-findPwd">
					<router-link to="">{{$t('message.forgetPayPassword')}}&gt;</router-link>
				</div>
			</div>
			<div class="change-account-label change-account-label-middle">
				<label for="newPayPassword">{{$t('message.newPayPassword')}}:</label>
			</div>
			<div class="change-account-input">
				<input type="password" id="newPayPassword" v-model="newPayPassword" :placeholder="$t('message.sixNumberPassword')" />
			</div>
			<div class="change-account-label change-account-label-middle">
				<label for="reNewPayPassword">{{$t('message.sureNewPayPassword')}}:</label>
			</div>
			<div class="change-account-input">
				<input type="password" id="reNewPayPassword" v-model="reNewPayPassword" :placeholder="$t('message.sureNewPayPassword')" />
			</div>
			<div class="change-account-btn-group">
				<button type="button" class="btn-item btn-confirm" @click="changePayPassword">{{$t('message.yes')}}</button>
				<button type="button" class="btn-item btn-cancle" @click="closeDialog">{{$t('message.no')}}</button>
			</div>
		</div>
		<!--修改支付密码成功-->
		<div class="change-success" v-else>
			<div class="change-success-icon"></div>
			<div class="change-success-title">
				{{$t('message.changePayPasswordSuccess')}}
			</div>
			<div class="change-success-tip">
				{{ delayTime }}{{$t('message.autoClose')}}
			</div>
		</div>
	</div>
</template>

<script>
export default {
  name: 'PersonalAccountChangePayPassword',
  data () {
    return {
      oldPayPassword: '',
      newPayPassword: '',
      reNewPayPassword: '',
      isOldPayPasswordError: false,
      isChangePayPasswordSuccess: false,
      delayTime: 3
    }
  },
  methods: {
    changePayPassword () {
      this.$http.get('/api/getPayPassword').then((res) => {
        if (this.oldPayPassword !== res.data.password) {
          this.isOldPayPasswordError = true
          return
        } else {
          this.isChangePayPasswordSuccess = true
          this.delayCloseDialog()
//        this.$emit('change-val')
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    closeDialog () {
      this.$emit('close')
    },
    delayCloseDialog () {
      this.delayTimer = setInterval(() => {
        if (this.delayTime <= 0) {
          clearInterval(this.delayTimer)
          this.closeDialog()
        } else {
          this.delayTime -= 1
        }
      }, 1000)
    }
  }
}
</script>

<style scoped>
.change-container {
	background-color: #fff;
}

.change-account {
	width: 416px;
	padding: 40px;
}

.change-account-title {
	height: 28px;
	line-height: 28px;
	font-size: 20px;
	color: #333;
	text-align: center;
}

.change-account-label {
	height: 20px;
	line-height: 20px;
	font-size: 14px;
	color: #333;
	margin-top: 40px;
}

.change-account-label-middle {
	margin-top: 24px;
}

.change-account-input {
	width: 416px;
	height: 48px;
	margin-top: 12px;
}

.change-account-input input {
	width: 384px;
	height: 46px;
	border: 1px solid #d7d7d7;
	border-radius: 2px;
	font-size: 14px;
	color: #333;
	padding: 0 15px;
}

.change-account-error {
	height: 20px;
	line-height: 20px;
	font-size: 14px;
	color: #ff600a;
	padding-left: 24px;
	margin-top: 12px;
	background: url(../../../assets/images/icon_errorTips.png) no-repeat left center;
	overflow: hidden;
}

.change-account-error-text {
	float: left;
}

.change-account-findPwd {
	float: right;
}

.change-account-findPwd a {
	color: #ff600a;
}

.change-account-btn-group {
	margin-top: 40px;
	font-size: 0;
}

.change-account-btn-group .btn-item {
	width: 200px;
	height: 48px;
	border-radius: 2px;
	font-size: 16px;
	cursor: pointer;
}

.change-account-btn-group .btn-confirm {
	border: 1px solid #ff600a;
	background-color: #ff600a;
	color: #fff;
	margin-right: 16px;
}

.change-account-btn-group .btn-confirm:hover {
	background-color: #ff3c00;
}

.change-account-btn-group .btn-confirm:active {
	background-color: #e83700;
}

.change-account-btn-group .btn-cancle {
	border: 1px solid #d7d7d7;
	background-color: #fff;
	color: #a5a5a5;
}

.change-success {
	width: 480px;
	padding: 60px 0;
}

.change-success-icon {
	width: 60px;
	height: 60px;
	margin: 0 auto;
	background: url(../../../assets/images/icon_success.png) no-repeat center;
}

.change-success-title {
	height: 26px;
	line-height: 26px;
	font-size: 24px;
	color: #333;
	text-align: center;
	margin-top: 24px;
}

.change-success-tip {
	height: 20px;
	line-height: 20px;
	font-size: 14px;
	color: #747474;
	text-align: center;
	margin-top: 12px;
}
</style>